<template>
  <div class="transition-container">
    <button @click="show = !show">
      Toggle render
    </button>

    <!-- 使用vue内置组件transition, 可以给任何元素和组件添加进入\离开过渡  -->
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: "MTransition",
  setup() {
    const show = ref(true);

    return {
      show
    }
  }
}
</script>

<style lang="less" scoped>

//.fade-enter-active,
//.fade-leave-active {
//  color: #42b983;
//  transition: opacity 2s ease;
//}
//
//.fade-enter-from,
//.fade-enter-to {
//  opacity: 0;
//}

.transition-container {
  margin-bottom: 50px;

  /* 可以为进入和离开动画设置不同的持续时间和动画函数 */
  // 如果需要多组动画, transition加上name属性  name="xxx"
  // name属性的值替换v即可  v-enter-from --> xxx-enter-from
  // 进入 vue2.0 v-enter      v-enter-active v-enter-to
  // 进入 vue3.0 v-enter-from v-enter-active v-enter-to

  // 离开 vue2.0 v-leave      v-leave-active v-leave-to
  // 离开 vue3.0 v-leave-from v-leave-active v-leave-to

  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
}


</style>
